<template>
  <!-- 搜索区域 -->
  <div class="search-view global-display global-a-items fadeIn">
    <div class="global-display global-a-items">
      <p>北京南</p>
      <img src="@/icon/found/found-ad.svg" alt="" />
    </div>
    <van-search
      @click="skipSearch"
      disabled
      background="none"
      class="search-flex"
      shape="round"
      placeholder="搜索地点/美食/路线等"
    />
  </div>
  <!-- 背景图片 -->
  <div class="search-back fadeIn">
    <img src="@/icon/found/found-search-back.jpg" alt="" />
  </div>
  <!-- 当地玩法 -->
  <p class="cityplay">当地玩法</p>
  <div class="cityplay-grid global-display global-f-wrap fadeIn">
    <div v-for="(item, index) in 5" :key="index">
      <img
        src="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/a-luying.jpg"
        alt=""
      />
      <p :style="{ backgroundColor: '#587fac' }">露营</p>
    </div>
  </div>
  <!-- 当地攻略 -->
  <p class="cityplay">当地游记</p>
  <!-- 瀑布流 -->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    :immediate-check="false"
    offset="100"
    @load="onLoad"
  >
    <card :userTravels="userTravels" />
  </van-list>
  <div style="height: 100px"></div>
  <tabbar />
  <skIndex v-if="skeLeton" />
</template>

<script setup>
import tabbar from "@/components/tabbar/index.vue";
import skIndex from "@/page/Skeleton-screen/SK-found.vue";
import card from "@/components/cardFlow/index.vue";
import found_ad from "@/icon/found/found-ad.svg";
import { ref } from "vue";
const loading = ref(true);
const finished = ref(true);

const skeLeton = ref(false);

const userTravels = ref([]);

const textColor = ref("#ffffff"); //城市文字颜色
const searchColor = ref("#ffffff"); //搜索框颜色
const searchBack = ref(0); //搜索框背景
const addIcon = ref(found_ad); //选择地址上的图标



const onLoad = () => {
  console.log("正在加载");
};
</script>

<style scoped>
.search-view {
  padding: 5px 0 5px 10px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: rgba(255, 255, 255, v-bind("searchBack"));
  z-index: 999;
}
.search-view p {
  font-size: 17px;
  font-weight: bold;
  color: v-bind("textColor");
}
.search-view img {
  width: 15px;
  height: 15px;
  display: block;
  margin-left: 5px;
}
.search-flex {
  flex: 1;
}
.search-back,
img {
  object-fit: cover;
  width: 100%;
  height: 170px;
}
::v-deep .van-search__content {
  background-color: v-bind("searchColor") !important;
}
.cityplay {
  padding: 20px 10px 10px 10px;
  font-size: 18px;
  font-weight: bold;
}
.cityplay-grid {
  margin: 0 5px;
}
.cityplay-grid div {
  width: calc(33.33% - 5px * 2);
  margin: 5px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 110px;
}
.cityplay-grid img {
  width: 100%;
  height: 110px;
  object-fit: cover;
}
.cityplay-grid p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 8px;
  font-size: 14px;
  color: #ffffff;
}
</style>
